<template>
    <div>
        <el-col :span="spanVal">
            <div class="data-box">
                <p class="title">{{boxData.title}}</p>
                <div class="priamy-color" style="font-size: 30px">{{boxData.data}}</div>
                <div class="flex-box" >
                    <div class="flex-item" v-for="(item,index) in boxData.list" :key="index">
                        <p class="value">{{item.list_data}}</p>
                        <p>{{item.text}}</p>
                    </div>
                </div>
            </div>
        </el-col>
    </div>
</template>

<script>
    export default {
        name: "boxView",
        props:['boxData','spanVal']
    }
</script>

<style scoped>
    .data-box{
        height:250px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: space-between;
    }
    .priamy-color{
        color:#409EFF;
    }
    .title{
        padding:20px;
        font-weight: bold;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    .flex-item{
        flex:1;
        height:100%;
        border-right:1px solid #eee;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }
    .flex-item .value{
        font-size: 18px;
        font-weight: bold;
        color:#000;
    }
    .flex-item p{
        margin:2px 0;
        font-size: 14px;
        color:#bbb;
    }
    .flex-item:last-child{
        border:none;
    }
    .flex-box{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding:10px;
        box-sizing: border-box;
        border-top:1px solid #eee;
        height:80px;
    }
</style>
